<!DOCTYPE html>
<head>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/core.js"></script>

    <title>学无止境</title>
</head>
<body>
<div class="dandelion">
    <h1 style="align-content: center">Hello Clojure</h1>
    <span class="smalldan"></span>
    <span class="bigdan"></span>
    <h2>Upload a file</h2>
    <form action="/api/files/upload" enctype="multipart/form-data" method="POST">
        <input id="file" name="file" type="file" />
        <input type="submit" value="upload" />
    </form>
</div>
<style type="text/css">
    /* 在小屏幕自动隐藏 */
    @media screen and (max-width:600px){
        .dandelion{display: none !important;}
    }
    .dandelion span {
        display: block;
        position: fixed;
        z-index: 9999999999;
        bottom: 0px;
        background-image: url();
        background-repeat: no-repeat;
        _background: none;
        /* 动画效果 */
        -webkit-animation: ball-x 3s linear 2s infinite;
        -moz-animation: ball-x 3s linear 2s infinite;
        animation: ball-x 3s linear 2s infinite;
        -webkit-transform-origin: bottom center;
        -moz-transform-origin: bottom center;
        transform-origin: bottom center;
    }
    /* 大的蒲公英样式 */
    .dandelion .bigdan {
        width: 64px;
        height: 115px;
        left: 41px;
        background-position: -86px -36px;
        border: 0px solid #fff;
    }
    /* 小的蒲公英样式 */
    .dandelion .smalldan {
        width: 36px;
        height: 60px;
        left: 88px;
        background-position: 0 -90px;
        border: 0px solid #fff;
    }
    /* 以下是动画效果 */
    @keyframes ball-x {
        0% { transform:rotate(0deg);}
        25% { transform:rotate(5deg); }
        50% { transform:rotate(0deg);}
        75% { transform:rotate(-5deg);}
        100% { transform:rotate(0deg);}
    }
    @-webkit-keyframes ball-x {
        0% { -webkit-transform:rotate(0deg);}
        25% { -webkit-transform:rotate(5deg); }
        50% { -webkit-transform:rotate(0deg);}
        75% { -webkit-transform:rotate(-5deg);}
        100% { -webkit-transform:rotate(0deg);}
    }
    @-moz-keyframes ball-x {
        0% { -moz-transform:rotate(0deg);}
        25% { -moz-transform:rotate(5deg); }
        50% { -moz-transform:rotate(0deg);}
        75% { -moz-transform:rotate(-5deg);}
        100% { -moz-transform:rotate(0deg);}
    }
</style>

<!--浏览器标题切换-->
<script>
    var OriginTitile = document.title;    // 保存之前页面标题
    var titleTime;
    document.addEventListener('visibilitychange', function(){
        if (document.hidden){
            document.title = 'Clojure';
            clearTimeout(titleTime);
        }else{
            document.title = '生命-1s ~ ';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            }, 2000); // 2秒后恢复原标题
        }
    });
</script>
</body>
</html>